<style type="text/css">
    .showpic img {
        height: 200px;
        width: 300px
    }

    .showpic li {
        width: 340px;
        height: 250px;
        float: left;
        text-align: center
    }
</style>
<script type="text/javascript">
    <!--
    $(function () {
        var $winH = $(window).height();
        var $img = $("img[original]");
        var $imgH = parseInt($img.height() / 2);//图片到一半的时候显示
        var finished = true;
        runing();
        if ($("img[original]").size() > 0) {
            $(window).scroll(function () {
                if (finished) {
                    finished = false;
                    runing();
                }
            });
        }
        function runing() {
            $winH = $(window).height();
            $img.each(function (i) {
                var $src = $img.eq(i).attr("original");
                var $scroTop = $img.eq(i).offset();
                if ($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH) {//判断窗口至上往下的位置
                    $img.eq(i).attr("src", function () {
                        return $src
                    }).fadeIn(300);//元素属性交换
                }
            });
            finished = true;
        }
    });
    //-->
</script>
必须加载以下宏 delayImg 图片的初始尺寸用样式定义好 也可用MAP形式传入到DELAY宏里进行初始化

<div class="showpic">
    <ul>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>
        <li>
            <img src="/static/org/tinygroup/thumbnails/img/pic.png" original="/static/img/m2.png"/>
        </li>

    </ul>
</div>
<div class="clear"></div>
<h3>
    组件包 </h3>
<pre class="prettyprint linenums"><span class="Huialert-danger">以上为单PAGE可直接使用 只需调用JS 和delayImg宏</span></pre>
